<template>
  <div
    class="code-message"
    :class="{
      'max-height': lineNumber > 6,
      'max-width': maxwidth,
      'full-screen': fullscreen,
    }"
  >
    <el-icon @click="fullscreen = false" style="z-index: 20;" v-if="fullscreen"><ele-Close /></el-icon>
    <i v-else @click="fullscreen = true" class="fa fa-terminal"></i>
    <div class="pre">
      <PrismEditor
        class="lum-scrollbar"
        v-model="codeData"
        :highlight="highlighter"
        :readonly="true"
      />
    </div>
    <!-- <pre class="lum-scrollbar" v-html="formatCode(code, lang)" /> -->
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, computed } from 'vue'
import { PrismEditor } from 'vue-prism-editor';
import { languages, highlight } from 'prismjs/components/prism-core';
import 'vue-prism-editor/dist/prismeditor.min.css';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism-tomorrow.css';

export default {
    name: 'CodeMessage',
    props: {
        code: {
            type: [String, Number],
            default: ''
        },
        lang: {
            type: String,
            default: ''
        },
        maxwidth: {
            type: Boolean,
            default: false
        }
    },
    components: {
      PrismEditor,
    },
    setup(props) {
        const { code } = toRefs(props)
        const state = reactive({
            fullscreen: false,
            lineNumber: 0
        })
        const codeData = computed(() => {
          return code.value
        })
        const highlighter = (code) => {
            return highlight(code, languages.js);
        }
        onMounted(() => {
            state.lineNumber = code.value.split(/\n/).length
        })
        return {
            ...toRefs(state),
            highlighter,
            codeData
        }
    }
}
</script>

<style lang="scss" scoped>
.code-message {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  box-sizing: border-box;

  &.max-width {
    max-width: 500px;
  }

  &.max-height {
    height: 208px;
  }

  i {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 16px;
    cursor: pointer;
    color: white;
    display: inline-block;
    opacity: 0;
    width: 50px;
    height: 30px;
    background: #171616;
    text-align: center;
    line-height: 30px;
    border-radius: 0 0 0px 8px;
    transition: 1s ease;
  }

  &:hover {
    i {
      opacity: 1;
    }
  }

  .pre {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 30px 10px 10px 10px;
    line-height: 24px;
    background: #272822;
    color: #d5d4d4;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
      'Courier New', monospace;
    font-size: 85%;

    &.lum-scrollbar {
      &::-webkit-scrollbar {
        background-color: black;
      }
    }
  }

  .pre:before {
    position: absolute;
    left: 12px;
    z-index: 0;
    margin-top: -18px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fc625d;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: ' ';
  }

  &.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: unset;
    max-height: unset;
    border-radius: 0px;
    background: #272822;
    z-index: 99999999;

    i {
      position: fixed;
      top: 15px;
      right: 15px;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 24px;

      &:active {
        box-shadow: 0 0 5px 0px #ccc;
      }
    }
  }
}
</style>